<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>每小时食品销量折线图</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/echarts.min.js"></script>
    <style>
        *{
            font-family: 仿宋;
            color: rgb(16, 91, 6);
        }
        body {
            background-image: url('img/bizhi.jpg');
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
        }
        a{
            text-decoration: none;
        }
        html body{
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        .containerBtn{
            width: 200px;
            background-color: cornsilk;
            padding: 15px;
            border: none;
            cursor: pointer;
        }
        .containerBtn1{
            width: 200px;
            background-color: #d1e8be;
            padding: 15px;
            border: none;
            cursor: pointer;
        }
        .container{
            position: relative;
            display: inline-block;
            /*width: 230px;*/
        }
        .hidden-container{
            left: 100px;
            display: none;
            position: absolute;
            background-color: antiquewhite;
            width: 230px;
            box-shadow: 0px 8px 16px 0px rgb(0,0,0,0.2);
            z-index: 1;
        }
        .hidden-container a{
            margin-left: 20px;
        }
        .hidden-container a:hover{
            color: #34640d;
            font-size: 22px;

        }
        .container:hover .hidden-container{
            display: block;
        }
        .container:hover .containerBtn{
            background-color: #96d08e;
        }
    </style>
</head>

<body id="app">
<div style="width: 100%;height: 600px">
    <!--头部-->
    <div style="height: 50px;width: 100%;padding-top: 20px">
        <span style="margin-left: 40%;margin-top: 15%;font-size: 24px;font-family: 仿宋" >早餐管理系统后台</span>
        <div style="margin-top: -30px">
            <span v-on:click="this.adminUnlogin()" style="margin-left: 90%;font-size: 20px">退出</span>
        </div>
    </div>

    <div style="width: 230px;background-color: cornsilk;height: calc(100% - 30px);float: left">
        <div class="containerBtn1"><span style="margin-left: 30%">客户管理</span></div>
        <div class="containerBtn"><span style="margin-left: 30%">类型管理</span></div>
        <div class="containerBtn1"><span style="margin-left: 30%"><a href="/admin/foods.html">食品管理</a></span></div>
        <div class="container">
            <button class="containerBtn" style="width: 230px">数据分析</button>
            <div class="hidden-container"><br>
                <a href="/admin/foods-num.html">食品实时库存柱状图</a><br><br>
                <a href="/admin/foods-sale-price.html">食品销售额饼图</a><br><br>
                <a href="/admin/orders-num-group-by-hour.html">小时订单实时折线图</a><br><br>
                <a href="/admin/orders-foods.html">不同类型销售比例图</a><br><br>
                <a href="/admin/orders-typesId-hour.html">小时不同类型打包图</a><br><br>
                <a href="/admin/summation-data.html">数据汇总大屏</a><br><br>
            </div>
        </div>
        <div class="containerBtn1"><span style="margin-left: 30%">系统日志</span></div>
        <div class="containerBtn"><span style="margin-left: 30%">推荐参数</span></div><br>
    </div>
    <!--右边显示区域-->
    <div style="width: calc(100% - 230px);height: calc(100% - 30px);float: left">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 800px;height:400px;background-color: white"></div>
    </div>

    <div style="clear: both"></div>
</div>
</body>
<script>
    //定义app
    const app = {

        //数据绑定
        data() {
            return {
                //数据
                x3:[],
                y3:[]
            }
        },
        //事件绑定
        methods: {

            //图表初始化
            initEcharts: function () {
                console.log("图表开始初始化...")
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: 'ECharts 每小时食品销量折线图',
                        subtext: '今天',
                        left:'center'
                    },
                    tooltip: {},
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    xAxis: {
                        data:this.x3
                    },
                    yAxis: {

                    },
                    series: [
                        {
                            name: '销售',
                            type: 'line',
                            radius:'50%',
                            data: this.y3,
                            //样式
                            itemStyle: {
                                barBorderRadius: 5,
                                borderWidth: 1,
                                borderType: 'solid',
                                borderColor: '#73c0de',
                                shadowColor: '#5470c6',
                                shadowBlur: 3
                            }
                        }
                    ]
                };

                //使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            //退出登录
            adminUnlogin:function (typesId) {
                axios({
                    method: "post", url: "/adminUnlogin", data: {}
                }).then((response) => {
                    if(response.data==="ok"){
                        alert("退出成功！")
                        window.location.href="/index.html"
                    }else {
                        alert(response.data)
                    }
                });
            },
            //获取数据
            getOrdersNumGroupByHour: function () {
                axios({
                    method: "post", url: "/getOrdersNumGroupByHour", data: {}
                }).then((response) => {
                    this.x3=response.data.x
                    this.y3=response.data.y
                    console.log("开始显示图表")
                    //初始化图表
                    this.initEcharts()
                });
            },


        },

        //构造方法
        mounted() {
            console.log("vue启动成功！")
            this.getOrdersNumGroupByHour()
            this.initEcharts()
        }
    }

    //启动app
    Vue.createApp(app).mount("#app")
</script>
</html>